<template>
  <div>
    <div>
      <van-nav-bar title="影院" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left> <!-- 往left插槽里面插入以下内容-->
          {{ cityName }}<van-icon name="arrow-down" color="black"/>
        </template>
        <template #right>
          <van-icon name="search" size="20" color="black"></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- 影院列表 -->
    <div class="cinema" :style="{height: height}">
      <ul>
        <li v-for="item in cinemaList" :key="item.cinemaId">
          <div>{{ item.name }}<span style="float: right;margin-right: 10px;color: orangered">{{ item.lowPrice / 100 }}￥</span></div>
          <div class="address">{{ item.address }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


import BetterScroll from "better-scroll"
import Vue from "vue";
import {NavBar,Icon} from "vant";
import {mapActions, mapMutations, mapState} from "vuex";

Vue.use(NavBar).use(Icon)

export default {
  data() {
    return {
      height: 0,
    }
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 100 + 'px' //获取设备高度减去底部和头部高度，得到列表显示的高度

    if (this.cinemaList.length === 0) {
      //异步加载数据
      //this.$store.dispatch('getCinemaList',this.cityId).then(() => {
        this.getCinemaList(this.cityId).then(() => {
        //状态立即更改，但是dom异步渲染
        //Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。
        this.$nextTick(() => {
          new BetterScroll('.cinema', {
            scrollbar: {
              fade: true  //滚动时才出现滚动条
            }
          })
        })
      })
    } else {
      //使用缓存数据
      console.log("缓存")
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: {
            fade: true  //滚动时才出现滚动条
          }
        })
      })
    }
  },
  methods: {
    ...mapActions('cinemaModule',['getCinemaList']),
    ...mapMutations('cinemaModule',['clearCinemaList']),
    onClickLeft() {
      this.clearCinemaList() //清空影院列表，便于选择新的城市之后重新加载数据
      this.$router.push("/city")
    },
    onClickRight() {
      this.$router.push('/cinema/search')
    },

  },
  computed: {
    ...mapState('cityModule',['cityId','cityName']),
    ...mapState('cinemaModule',['cinemaList'])
  }
}
</script>

<style lang="scss" scoped>
.cinema {
  overflow: hidden;
  position: relative;
  background-color: white;
}

li {
  margin: 10px 10px 26px 10px;
}

.address {
  font-size: 13px;
  color: gray;
}
</style>
